<template>
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-6">欢迎来到购物商城</h1>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div v-for="product in featuredProducts" :key="product.id"
           class="border rounded-lg p-4 hover:shadow-lg transition">
        <img :src="product.image" :alt="product.title" class="w-full h-48 object-contain mb-4">
        <h2 class="text-xl font-semibold mb-2">{{ product.title }}</h2>
        <p class="text-gray-600 mb-2">¥{{ product.price }}</p>
        <router-link :to="`/product/${product.id}`"
                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          查看详情
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useProductStore } from '../store/productStore'

const productStore = useProductStore()
const featuredProducts = ref([])

onMounted(async () => {
  await productStore.fetchProducts()
  featuredProducts.value = productStore.products.slice(0, 6)
})
</script> 